import React from "react";
import {commonRequest} from "../../util/network/RequestHub";
import {Avatar, Divider, Menu, Dropdown, Space} from "antd";
import {GET_TOP_DESIGNER, GET_TOP_DEVELOPER, GET_TOP_WORK} from "../../util/network/config/ApiConst";
import {ALFlexBox, ALLoading} from "../../components/al-component";
import './style.scss';

class TopPage extends React.Component {

  //构造器
  constructor(props) {
    super(props);
    this.state = {
      topWorkData: null,
      topDesignerData: null,
      topDeveloperData: null,
      currentTab: "优秀作品榜",
      tabCardData: ["优秀作品榜", "人气设计师榜", "人气开发者榜"]
    };
  }

  // 渲染函数
  render() {

    const dropDownMenu = (
        <Menu>
          <Menu.Item>
            <a onClick={() => {}}>
              第1期
            </a>
          </Menu.Item>
          <Menu.Item>
            <a onClick={() => {}}>
              第2期
            </a>
          </Menu.Item>
        </Menu>
    );

    const tabCardTitle = (
      <div className="tab-title-box">
        <ALFlexBox centerV className="tab-title">
          <Space>
            {
              this.state.tabCardData.map((item, index) => {
                return <a onClick={() => {
                  this.setState({
                    currentTab: item
                  })
                }}>
                  <h3 key={index}
                      className="al-text-color-white"
                      style={
                        item === this.state.currentTab ?
                          {
                            fontSize: 22+"px"
                          } : {}
                      }
                  >
                    {item}
                  </h3>
                </a>
              })
            }
          </Space>
        </ALFlexBox>
        <div className="num-times">
          <Dropdown overlay={dropDownMenu}>
            <span className="al-cursor-pointer">第1期</span>
          </Dropdown>
        </div>
      </div>
    )

    // 优秀作品榜
    const tabCardContent1 = (
      <div className="work-data">
        {
          this.state.topWorkData === null ? <ALLoading show/> :
            <div>
              {
                this.state.topWorkData.map((item, index) => {
                  return (
                    <div>
                      <div key={index} className="work-data-box">
                        <div className="text-and-poster-box">
                          <ALFlexBox centerV>
                            <h1 className="top-text">TOP {item.top}</h1>
                          </ALFlexBox>
                          {/*封面*/}
                          <div className="work-poster-box">
                            <img src={item.poster}/>
                          </div>
                        </div>

                        <div className="user-info-wrapper">
                          <div style={{lineHeight: 2.5 + 'em', maxWidth: '80vw'}}>
                            <h2 className="al-text-overflow-show-point">{item.title}</h2>
                            <div>{item.createdTime}</div>
                            <div>
                              浏览<span className="al-m-right-10px">{item.lookCount}</span>
                              评论<span className="al-m-right-10px">{item.commentCount}</span>
                              点赞<span className="al-m-right-10px">{item.likeCount}</span>
                              收藏<span className="al-m-right-10px">{item.favorCount}</span>
                            </div>
                          </div>

                          <ALFlexBox centerV className="al-m-top-20px">
                            <Avatar src={item.user.avatar}/>
                            <span className="al-m-lr-20px">{item.user.nickname}</span>
                          </ALFlexBox>
                        </div>
                      </div>
                      <Divider style={{margin: 0, backgroundColor: "#afafaf"}}/>
                    </div>
                  )

                })
              }
            </div>
        }
      </div>
    )

    const tabCardContent2 = (
      <div className="ui-designer-data">
        {
          this.state.topDesignerData === null ? <ALLoading show/> :
            <div>
              {
                this.state.topDesignerData.map((item, index) => {
                  return (
                    <div>
                      <div key={index} className="user-box">
                        <ALFlexBox centerV  className="">
                          <div className="text-and-poster-box">
                            <ALFlexBox centerV>
                              <h1 className="top-text">TOP {item.top}</h1>
                            </ALFlexBox>
                            {/*头像*/}
                            <div className="work-poster-box">
                              <Avatar src={item.avatar} size={100}/>
                            </div>
                          </div>
                          <div className="user-info-wrapper">
                            <div style={{lineHeight: 2.5 + 'em'}}>
                              <h2 className="al-text-overflow-show-point">{item.nickname}</h2>
                              <div>
                                作品<span className="al-m-right-10px">{item.workCount}</span>
                                粉丝<span className="al-m-right-10px">{item.fansCount}</span>
                                浏览<span className="al-m-right-10px">{item.visitCount}</span>
                              </div>
                            </div>
                          </div>
                        </ALFlexBox>
                      </div>
                      <Divider style={{margin: 0, backgroundColor: "#afafaf"}}/>
                    </div>
                  )
                })
              }
            </div>
        }
      </div>
    )

    const tabCardContent3 = (
      <div className="developer-data">
        {
          this.state.topDeveloperData === null ? <ALLoading show/> :
            <div>
              {
                this.state.topDesignerData.map((item, index) => {
                  return (
                    <div>
                      <div key={index} className="user-box">
                        <ALFlexBox centerV  className="">
                          <div className="text-and-poster-box">
                            <ALFlexBox centerV>
                              <h1 className="top-text">TOP {item.top}</h1>
                            </ALFlexBox>
                            {/*头像*/}
                            <div className="work-poster-box">
                              <Avatar src={item.avatar} size={100}/>
                            </div>
                          </div>
                          <div className="user-info-wrapper">
                            <div style={{lineHeight: 2.5 + 'em'}}>
                              <h2 className="al-text-overflow-show-point">{item.nickname}</h2>
                              <div>
                                作品<span className="al-m-right-10px">{item.workCount}</span>
                                粉丝<span className="al-m-right-10px">{item.fansCount}</span>
                                浏览<span className="al-m-right-10px">{item.visitCount}</span>
                              </div>
                            </div>
                          </div>
                        </ALFlexBox>
                      </div>
                      <Divider style={{margin: 0, backgroundColor: "#afafaf"}}/>
                    </div>
                  )
                })
              }
            </div>
        }
      </div>
    )

    const showTabCardContent = (title) => {
      switch (title){
        case this.state.tabCardData[0]:
          return tabCardContent1;
        case this.state.tabCardData[1]:
          return tabCardContent2;
        case this.state.tabCardData[2]:
          return tabCardContent3;
        default:
          return <ALLoading show />
      }
    }

    return (
        <div style={{backgroundColor: "#e74c3c"}} className="al-width-100 top-page">

          <div className="content-width">
            {/*顶部选项卡*/}
            {tabCardTitle}

            {showTabCardContent(this.state.currentTab)}


          </div>
        </div>
    );
  }



  // 生命周期函数
  //组件已挂载
  componentDidMount() {
    commonRequest({url: GET_TOP_WORK, env: "mock"}).then(res => {
      this.setState({
        topWorkData: res.data
      })
    });

    commonRequest({url: GET_TOP_DESIGNER, env: "mock"}).then(res => {
      this.setState({
        topDesignerData: res.data
      });
      console.log(res);
    });

    commonRequest({url: GET_TOP_DEVELOPER, env: "mock"}).then(res => {
      this.setState({
        topDeveloperData: res.data
      });
      console.log(res);
    });
  }

  //组件将要卸载时
  componentWillUnmount() {

  }


}

export default TopPage;
